<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>上传小票</title>
    <link href="css/mui.min.css" rel="stylesheet" />

    <style>
        ul {
            font-size: 14px;
            color: #8f8f94;
        }

        .mui-btn {
            padding: 10px;
        }
        .content-title{
            text-align: center;
        }
        .img-content{
            text-align: center;
        }
        .img-content img{
            max-width: 80%;
        }
    </style>
</head>

<body>
<!--<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
    <a href="main.html" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">上传小票</h1>
</header>-->
<div class="mui-content">
    <div class="mui-content-padded">

        <div class="mui-input-row">
            <div class="content-title">上传外卖或购物小票领20下注积分</div>

        </div>
        <div class="mui-input-row" style="margin: 10px 5px;">
            <div class="img-content"><img id="ticketImg" src="" /></div>
        </div>
        <div class="mui-input-row">
            <label></label>

        </div>

        <div class="mui-input-row">
            <label></label>

        </div>



        <div class="mui-content-padded">
            <button id='scan' onclick="scanQRCode()" class="mui-btn mui-btn-block mui-btn-danger">上传小票</button>
        </div>

        <div class="mui-input-row">
            <label><a href="javascript:" onclick="linkTZ()">去投注>>></a></label>

        </div>

    </div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script>
    var appId = '';
    var timestamp = 0; //为了让后台传过来的timetamp是数字类型 否则字符串 估计又会报config fail错误
    var nonceStr = '';
    var signature = '';
    //var wx;

    $(document).ready(function() {

        var paramStr = {};
        paramStr.url = Common.WEB_PATH+"/fenful/h5/uploadImg.html";
        var params = {};
        params.paramStr = JSON.stringify(paramStr);

        Common.ajaxWithParam("/fenful/api/v1/common/getWxConfig",params, function(returnData) {
            //console.log(returnData);
            appId = returnData.appId;
            timestamp = returnData.timestamp;
            nonceStr = returnData.nonceStr;
            signature = returnData.signature;

            //console.log(appId);

            wx.config({ //开始微信的配置 将获取的数据拿去请求
                debug: false,
                appId: appId,
                timestamp: timestamp,
                nonceStr: nonceStr,
                signature: signature,
                jsApiList: [ //可以调用下面的接口 我们这里只是调用scanQRCode 也就是扫码接口

                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage'

                ]
            });

            wx.ready(function(res) {
                console.log("wx init successs!");
            });

            wx.error(function(res) {

            });
        });

        /*
         * 注意：
         * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
         * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
         * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
         *
         * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
         * 邮箱地址：weixin-open@qq.com
         * 邮件主题：【微信JS-SDK反馈】具体问题
         * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
         */

    });

    function scanQRCode() {
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                var localId= res.localIds[0];
                //选择图片成功，上传到微信服务器
                wx.uploadImage({
                    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        var params = {};
                        var paramStr = {};
                        var phoneNum = window.localStorage.getItem("phoneNum");
                        var token = window.localStorage.getItem("token");
                        paramStr.mediaId =serverId;
                        paramStr.phoneNum =phoneNum;
                        paramStr.merchantId = "0eb7777388bc41abb2bc6d0f18e460a0";
                        params.paramStr = JSON.stringify(paramStr);

                        Common.ajaxWithParam("/fenful/api/v1/common/ocrWeixinTicket", params, function(returnData) {
                                if(returnData){
                                    $("#ticketImg").attr("src",returnData.imgUrl);
                                    //判断处理结果
                                    if(returnData.isSelf){
                                        window.location.href="/fenful/h5/wzlh5/index.html?phoneNum="+phoneNum+"&token="+token;
                                    }else{
                                        layer.msg("小票上的号码与实际不符，请上传您自己的小票或将页面分享给您的好友！");
                                    }

                                }else{
                                    mui.toast("上传失败！");
                                }
                        });


                    }
                });
            }
        });
    }
    //去投注
function linkTZ() {
    var phoneNum = window.localStorage.getItem("phoneNum");
    var token = window.localStorage.getItem("token");
    window.location.href=Common.WEB_PATH+"/fenful/h5/wzlh5/index.html?phoneNum="+phoneNum+"&token="+token;
    return false;
}

</script>
</body>

</html>